<template>
  <div class="mora">
    <el-card>
      <div class="box">
        <!-- 左 -->
        <div class="left">
          <!-- 我的角色 -->
          <div class="MyRole">
            <h4>我的角色</h4>
            <ul v-show="myRole.name">
              <li style="width: 200px">
                <p>{{ myRole.name }}</p>
                <img :src="myRole.imgs" alt="" />
              </li>
            </ul>
          </div>
          <!--  系统角色-->
          <div class="SystemRole" v-show="isshow">
            <h4>系统角色</h4>

            <el-button
              type="primary"
              @click="randomRole"
              v-show="!SystemRole.name"
              >生成系统角色</el-button
            >

            <ul v-show="SystemRole.name">
              <li style="width: 200px">
                <p>{{ SystemRole.name }}</p>
                <img :src="SystemRole.imgs" alt="" />
              </li>
            </ul>
          </div>
          <!-- 我的出拳 -->
          <div class="MyRole" v-show="isshow1">
            <h4>我的出拳</h4>
            <ul v-show="mycaiquan.name">
              <li style="width: 200px">
                <p>{{ mycaiquan.name }}</p>
                <img :src="mycaiquan.imgs" alt="" />
              </li>
            </ul>
          </div>
          <!--系统出拳  -->
          <div class="MyRole" v-show="isshow2">
            <h4>系统出拳</h4>
            <el-button
              type="primary"
              @click="changesystemCaiquan"
              v-show="!systemcaiquan.name"
              >生成系统出拳</el-button
            >
            <ul v-show="systemcaiquan.name">
              <li style="width: 200px">
                <p>{{ systemcaiquan.name }}</p>
                <img :src="systemcaiquan.imgs" alt="" />
              </li>
            </ul>
          </div>
        </div>

        <!-- 右 -->
        <div class="right">
          <div class="role">
            <h4>请选择系统的角色</h4>
            <ul>
              <li
                v-for="(item, index) in allRole"
                :class="activeId == index ? 'a' : 'b'"
              >
                <p>{{ item.name }}</p>
                <img :src="item.imgs" alt="" @click="changeMyRole(item.id)" />
              </li>
            </ul>
          </div>
          <div class="caiquan">
            <h4>请选择系统的出拳</h4>
            <ul>
              <li
                v-for="(item, index) in allcaiqaun"
                :class="activeIndex == index ? 'a' : 'b'"
              >
                <p>{{ item.name }}</p>
                <img
                  :src="item.imgs"
                  alt=""
                  @click="changeMyCaiquan(item.id)"
                />
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 弹窗 -->
      <el-dialog
        title="猜拳结果"
        :visible.sync="dialogTableVisible"
        @close="clear"
        
      >
        <div class="result">
          <div class="resutleft">
            <p style="margin-bottom: 10px">{{ myRole.name }}</p>
            <img :src="mycaiquan.imgs" alt="" />
          </div>
          <h1 class="resultContent">vs</h1>
          <div class="resutRight">
            <p style="margin-bottom: 10px">{{ SystemRole.name }}</p>
            <img :src="systemcaiquan.imgs" alt="" />
          </div>
        </div>
        <h2 v-if="isWin" style="text-align: center">获胜方是:{{ winRole }}</h2>
        <h2 v-else style="text-align: center">平局</h2>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 选择角色
      allRole: [
        {
          id: 0,
          name: "赵云",
          imgs: "https://img0.baidu.com/it/u=4147990289,1188137584&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        },
        {
          id: 1,
          name: "关羽",
          imgs: "https://img2.baidu.com/it/u=1540885163,165576735&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1132",
        },
        {
          id: 2,
          name: "张飞",
          imgs: "https://img2.baidu.com/it/u=310270117,3797803983&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=711",
        },
        {
          id: 3,
          name: "马超",
          imgs: "https://img0.baidu.com/it/u=3830325758,3584941488&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=454",
        },
        {
          id: 4,
          name: "黄忠",
          imgs: "https://img1.baidu.com/it/u=3478731737,341025983&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=384",
        },
      ],
      //   猜拳
      allcaiqaun: [
        {
          id: 0,
          name: "石头",
          imgs: "https://img1.baidu.com/it/u=2094485730,3351853494&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500",
        },
        {
          id: 1,
          name: "剪刀",
          imgs: "https://img2.baidu.com/it/u=2087704602,1493574034&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375",
        },
        {
          id: 2,
          name: "布",
          imgs: "https://img0.baidu.com/it/u=2646420624,1754813483&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        },
      ],
      myRole: {}, //我的角色
      mycaiquan: {}, //我的猜拳
      SystemRole: {}, //系统角色
      systemcaiquan: {}, //系统猜拳
      winRole: "", //获胜方
      isWin: true, //获胜
      activeId: -1, //角色样式
      activeIndex: -1, //猜拳样式
      isshow: false,
      isshow1: false,
      isshow2: false,
      dialogTableVisible: false, //弹窗
    };
  },
  methods: {
    //   选择我的角色
    changeMyRole(id) {
      if (this.SystemRole.name) {
        this.$message({
          message: "无法更换",
          type: "warning",
        });
      } else {
        this.myRole = this.allRole.find((r) => r.id == id);
        this.isshow = true;
      }
    },
    // 选择猜拳
    changeMyCaiquan(id) {
      if (!this.isshow1) {
    
        this.isshow2 = false;
        this.$message({
          message: "请完成系统选角",
          type: "warning",
        });
      } else {
        this.mycaiquan = this.allcaiqaun.find((r) => r.id == id);
        this.isshow2 = true;
      }
    },
    // 系统角色
    randomRole() {
      for (let i = 1; i <= 10; i++) {
        let id;
        setTimeout(() => {
          id = Math.floor(Math.random() * 5);
          this.activeId = id;
          if (i == 10) {
            if (id == this.myRole.id) {
              this.activeId = -1;
              this.$message({
                message: "角色无法相同",
                type: "warning",
              });
            } else {
              this.SystemRole = this.allRole.find((r) => r.id == id);
              this.activeId = -1;
              this.isshow1 = true;
            }
            // this.$message('请选择你的角色')
          }
          //   console.log(id, index);
        }, 100 * i);
      }
    },
    // 系统猜拳
    changesystemCaiquan() {
      for (let i = 1; i <= 10; i++) {
        let id;
        setTimeout(() => {
          id = Math.floor(Math.random() * 3);
          this.activeIndex = id;
          if (i == 10) {
            this.systemcaiquan = this.allcaiqaun.find((r) => r.id == id);
            this.activeIndex = -1;
            this.dialogTableVisible = true;
            // this.$message('请选择你的角色')
            let mid = this.mycaiquan.id;
            let sid = this.systemcaiquan.id;
            console.log(mid, sid);
            if (
              (mid == 0 && sid == 1) ||
              (mid == 1 && sid == 2) ||
              (mid == 2 && sid == 0)
            ) {
              this.winRole = this.myRole.name;
              //   console.log(this.myRole.name);
            } else if (
              (sid == 0 && mid == 1) ||
              (sid == 1 && mid == 2) ||
              (sid == 2 && mid == 0)
            ) {
              this.winRole = this.SystemRole.name;
              //   console.log(this.SystemRole.name);
            } else {
              this.isWin = false;
            }
          }
          //   console.log(id, index);
        }, 100 * i);
      }
    },
    // 弹窗清除
    clear() {
      (this.myRole = {}), //我的角色
        (this.mycaiquan = {}), //我的猜拳
        (this.SystemRole = {}),
        (this.systemcaiquan = {});
      (this.winRole = ""),
        (this.activeId = -1),
        (this.activeIndex = -1),
        (this.isshow = false),
        (this.isshow1 = false),
        (this.isshow2 = false),
        (this.dialogTableVisible = false),
        (this.isWin = true);
    },
  },
};
</script>

<style scoped lang="scss">
img {
  width: 150px;
  height: 100px;
  border-radius: 10px;
}
ul {
  //   display: flex;
  li {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    p {
      height: 100px;
      line-height: 100px;
    }
  }
}
.box {
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
  .right {
    display: flex;
    .role {
      width: 200px;
      //   border: 1px solid red;
    }
    .caiquan {
      width: 200px;
      //   border: 1px solid red;
      margin-left: 40px;
    }
    // border: 1px solid red;
    h4 {
      width: 200px;
      text-align: center;
    }
  }
}
.a {
  transform: scale(1.5);
}
.result {
  display: flex;
  justify-content: space-between;
  .resutleft {
    text-align: center;
    // border: 1px solid red;
  }
  h1 {
    line-height: 127px;
  }
  .resutRight {
    text-align: center;
    // border: 1px solid red;
  }
}
</style>
